{% macro binaryParam(target, label, code, icon, disabled) %}
  <div class='d-flex justify-content-between'>
    <div>
      <label for='addCompound{{ target }}' class='col-form-label'>
      {% if code %}
        <img width='32' height='32' src='assets/images/ghs/GHS{{ code }}.svg' alt='{{ label|trans }}' title='{{ label|trans }}' />
      {% endif %}
      {% if icon %}
        <span title='{{ label|trans }}'>
          <i class='ml-2 mr-1 fas fa-{{ icon }}'></i>
        </span>
      {% endif %}
      {{ label|trans }}</label>
    </div>
    <label class='switch ucp-align {{ disabled ? 'disabled' }} '>
      <input name='{{ target }}' type='checkbox' {{ disabled ? 'disabled' }} autocomplete='off' id='addCompound{{ target }}'>
      <span class='slider'></span>
    </label>
  </div>
{% endmacro %}

{% macro textParam(target, label, disabled, required='', type='', placeholder='') %}
  <label for='compoundInput-{{ target }}' {{ required ? "class='required-label'" }}>{{ label }}</label>
  <div class='input-group mb-2'>
    <div class='input-group-prepend'>
      <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-{{ target }}'><i class='fas fa-clone'></i></button>
    </div>
    <input name='{{ target }}' {{ disabled ? 'readonly' }} {{ type == 'number' ? "type='number' step='0.01'" }} placeholder='{{ placeholder }}' {{ required }} class='form-control' id='compoundInput-{{ target }}' />
  </div>
{% endmacro %}

{% set compoundsDisabled = App.Users.userData.can_manage_compounds == 0 and App.Config.configArr.compounds_require_edit_rights == 1 %}

{# Modal for manual creation/edition of a compound #}
<div class='modal fade' id='editCompoundModal' tabindex='-1' role='dialog' aria-labelledby='editCompoundModalTitle'>
  <div class='modal-dialog modal-lg' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title' id='editCompoundModalTitle'><i class='fas fa-fw fa-pencil'></i> {{ 'Edit compound'|trans }}</h5>
        {# the clear-form action is repeated on the x icon or it would only work when clicking just next to the x, on the button element #}
        <button type='button' class='close' data-dismiss='modal' data-action='clear-form' data-target='editCompoundInputs' aria-label='{{ 'Close'|trans }}'>
          <span aria-hidden='true' data-action='clear-form' data-target='editCompoundInputs'>&times;</span>
        </button>
      </div>
      <form aria-label='{{ 'Edit compound'|trans }}' id='editCompoundForm'>
        <div class='modal-body'>
          <div class='d-flex justify-content-between'>
            <button type='button' class='btn btn-secondary btn-sm' data-action='search-entity-from-compound' data-page='database'>{{ 'Search associated resources'|trans }}</button>
            <button type='button' class='ml-2 btn btn-secondary btn-sm' data-action='search-entity-from-compound' data-page='experiments'>{{ 'Search associated experiments'|trans }}</button>
            <button type='button' class='btn btn-primary btn-sm ml-auto' data-action='toggle-modal' data-dismiss='modal' data-target='createResourceFromCompoundModal'>{{ 'Create resource from compound'|trans }}</button>
          </div>
          <div class='my-2' id='editCompoundInputs'>
            {{ _self.textParam('name', 'Name'|trans, compoundsDisabled, 'required') }}
            {{ _self.textParam('iupac_name', 'IUPAC Name'|trans, compoundsDisabled) }}
            {# special case for CAS and EC numbers, too many specifics to use the macro #}
            <label for='compoundInput-cas_number'>{{ 'CAS number'|trans }}</label>
            <div class='input-group mb-2'>
              <div class='input-group-prepend'>
                <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-cas_number'><i class='fas fa-clone'></i></button>
              </div>
              <input name='cas_number' {{ compoundsDisabled ? 'readonly' }} pattern='^\d{2,7}-\d{2}-\d$' inputmode='numeric' title='{{ 'Please enter a valid CAS number (e.g., 58-08-2)'|trans }}' placeholder='58-08-2' class='form-control' id='compoundInput-cas_number' />
            </div>
            <label for='compoundInput-ec_number'>{{ 'EC number'|trans }}</label>
            <div class='input-group mb-2'>
              <div class='input-group-prepend'>
                <button title='{{ 'Copy to clipboard'|trans }}' class='btn btn-outline-secondary' type='button' data-action='copy-to-clipboard' data-target='compoundInput-ec_number'><i class='fas fa-clone'></i></button>
              </div>
              <input name='ec_number' {{ compoundsDisabled ? 'readonly' }} pattern='^\d{3}-\d{3}-\d$' inputmode='numeric' title='{{ 'Please enter a valid EC number (e.g., 200-362-1)'|trans }}' placeholder='200-362-1' class='form-control' id='compoundInput-ec_number' />
            </div>
            {{ _self.textParam('molecular_formula', 'Molecular formula'|trans, compoundsDisabled, '', '', 'C8H10N4O2') }}
            {{ _self.textParam('molecular_weight', 'Molecular weight'|trans, compoundsDisabled, '', 'number', '194.19') }}
            {{ _self.textParam('smiles', 'SMILES', compoundsDisabled, '', '', 'CN1C=NC2=C1C(=O)N(C(=O)N2C)C') }}
            {{ _self.textParam('inchi', 'InChI', compoundsDisabled, '', '', 'InChI=1S/C8H10N4O2/c1-10-4-9-6-5(10)7(13)12(3)8(14)11(6)2/h4H,1-3H3') }}
            {{ _self.textParam('inchi_key', 'InChI Key', compoundsDisabled, '', '', 'RYYVLZVUVIJVGH-UHFFFAOYSA-N') }}
            <hr>
            <details>
              <summary><h5 class='d-inline'>{{ 'Safety information'|trans }}</h5></summary>
              {{ _self.binaryParam('is_hazardous2health', 'Hazardous to health', '07', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_corrosive', 'Corrosive', '05', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_explosive', 'Explosive', '01', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_flammable', 'Flammable', '02', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_gas_under_pressure', 'Gas under pressure', '04', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_hazardous2env', 'Hazardous to environment', '09', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_serious_health_hazard', 'Serious health hazard', '08', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_oxidising', 'Oxidising', '03', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_toxic', 'Toxic', '06', '', compoundsDisabled) }}
              {{ _self.binaryParam('is_radioactive', 'Radioactive', '', 'radiation', compoundsDisabled) }}
              {{ _self.binaryParam('is_controlled', 'Controlled substance', '', 'shield', compoundsDisabled) }}
              {{ _self.binaryParam('is_antibiotic', 'Antibiotic', '', 'bacterium', compoundsDisabled) }}
              {{ _self.binaryParam('is_antibiotic_precursor', 'Antibiotic precursor', '', 'bacterium', compoundsDisabled) }}
              {{ _self.binaryParam('is_explosive_precursor', 'Explosive precursor', '', 'explosion', compoundsDisabled) }}
              {{ _self.binaryParam('is_drug', 'Drug', '', 'pills', compoundsDisabled) }}
              {{ _self.binaryParam('is_drug_precursor', 'Drug precursor', '', 'pills', compoundsDisabled) }}
              {{ _self.binaryParam('is_cmr', 'Carcinogenic, mutagenic and reprotoxic (CMR)', '', 'skull-crossbones', compoundsDisabled) }}
              {{ _self.binaryParam('is_nano', 'Nanomaterial', '', 'atom', compoundsDisabled) }}
              {{ _self.binaryParam('is_ed2health', 'Endocrine disruptor for human health', '', 'skull', compoundsDisabled) }}
              {{ _self.binaryParam('is_ed2env', 'Endocrine disruptor for the environment', '', 'skull', compoundsDisabled) }}
              {{ _self.binaryParam('is_pbt', 'Persistent, bioaccumulative and toxic', '', 'skull', compoundsDisabled) }}
              {{ _self.binaryParam('is_pmt', 'Persistent, mobile and toxic', '', 'skull', compoundsDisabled) }}
              {{ _self.binaryParam('is_vpvb', 'Very persistent and very bioaccumulative', '', 'skull', compoundsDisabled) }}
              {{ _self.binaryParam('is_vpvm', 'Very persistent and very mobile', '', 'skull', compoundsDisabled) }}
            </details>

            <hr>
            <details>
              <summary><h5 class='d-inline'>{{ 'Immutable information'|trans }}</h5></summary>
              <label for='compoundInput-id'>ID</label>
              <input name='id' class='form-control' id='compoundInput-id' readonly disabled />
              <label for='compoundInput-pubchem_cid'>PubChem CID</label><a id='compoundLink-pubchem' target='_blank' rel='noopener' class='ml-2 external-link'>{{ 'See on PubChem'|trans }}</a>
              <input name='pubchem_cid' class='form-control' id='compoundInput-pubchem_cid' readonly disabled />
              <label for='compoundInput-userid_human'>{{ 'Owner'|trans }}</label>
              <input name='userid_human' class='form-control' id='compoundInput-userid_human' readonly disabled />
              <label for='compoundInput-team_name'>{{ 'Team'|trans }}</label>
              <input name='team_name' class='form-control' id='compoundInput-team_name' readonly disabled />
            </details>

          </div>
        </div>

        <div class='modal-footer'>
          <button type='button' class='btn btn-ghost' data-dismiss='modal'>{{ 'Cancel'|trans }}</button>
          <button type='submit' {{ compoundsDisabled ? 'disabled' }} class='btn btn-primary' id='editCompoundModalSaveBtn' data-action='save-compound'>{{ 'Save'|trans }}</button>
        </div>
      </form>
    </div>
  </div>
</div>
